import React, { Component} from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "./App.less";
import { Layout, Menu, Icon,} from "antd";
import menuList from "./navList.js";
import Home from "./pages/Home";
import Audio from './pages/Audio'
import Video from './pages/Video'

// import axios from "axios"
const { Header, Sider, Content } = Layout;
const SubMenu = Menu.SubMenu;

//设置axios中post传参请求格式
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      collapsed: false
    };
  }

  componentDidMount() {
    //渲染菜单
    const menuTree = this.getMenu(menuList);
    this.setState({
      menuTree
    });
    // console.log(this.props)
  }

  //获取菜单
  getMenu = data => {
    return data.map((value, key) => {
      if (value.children) {
        return (
          <SubMenu key={key}
            title={
              <span>
                <Icon type={value.type} />
                {value.title}
              </span>
            }
          >
            {this.getMenu(value.children)}
          </SubMenu>
        );
      } else {
        return (
          <Menu.Item key={value.key}>
            <Link to={value.key}>
              <Icon type={value.type} />
              <span>{value.title}</span>
            </Link>
          </Menu.Item>
        );
      }
    });
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  render() {
    return (
      <Router>
        <div className="layout">
          <Layout>
            <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
              <div className="logo" />
              <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
                {this.state.menuTree}
              </Menu>
            </Sider>
            <Layout>
              <Header style={{ background: "#fff", padding: 0 }}>
                <Icon
                  className="trigger"
                  type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
                  onClick={this.toggle}
                />

              </Header>
              <Content
                style={{
                  margin: "24px 16px",
                  padding: "24px",
                  background: "#fff",
                  minHeight: 280,
                  overflow: "auto"
                }}
              > 
                <Route exact path="/" component={Home} />

                <Route path='/audio' component={Audio}></Route>
                <Route path='/video' component={Video}></Route>
              </Content>
            </Layout>
          </Layout>
        </div>
      </Router>
    );
  }
}

export default App;
